<script setup lang="ts">
import { computed } from "vue";
import E from "wangeditor";
import Conversition from "../class/Conversition";
import store from "../store/index";
import User from "../class/User";

// 获取未读消息数量
const getUnReadCount = computed(() => {
  return (id: Number) => {
    return getUnReadCountById(id);
  };
});

// 获取消息最后一条内容
const getLastSession = computed(() => {
  return (id: Number) => {
    let currentContent = store.state.conversitionList.filter(
      (x: Conversition) =>
        (x.SendId == store.state.sender.Id && x.ReciverId == id) ||
        (x.SendId == id && x.ReciverId == store.state.sender.Id)
    );
    let result = "";
    if (currentContent.length > 0) {
      let len = currentContent.length - 1;
      switch (currentContent[len].Type) {
        case 0:
          result = currentContent[len].Content;
          break;
        case 1:
          result = "图片";
          break;
        case 2:
          result = "表情";
          break;
        case 3:
          result = "卡片";
          break;
      }
    }
    return result;
  };
});

//根据Id获取未读消息数量
function getUnReadCountById(id: Number) {
  let currentContent = store.state.conversitionList.filter(
    (x: Conversition) =>
      x.SendId == id && x.ReciverId == store.state.sender.Id && !x.ReadFlag
  );
  return currentContent.length > 999 ? "999+" : currentContent.length;
}

// 选择会话用户
function selectSession(item: User) {
  if (store.state.navId == 1) {
    store.setPropName("sessionSelectId", item.Id);
    store.setPropName("reciver", item);
    store.toBottom();
    store.changeReaded(item.Id);
    store.initEditor();
  } else if (store.state.navId == 2) {
    store.setPropName("allSessionSelectId", item.Id);
    store.setPropName("readyReciver", item);
  }
}
</script>

<template>
  <div class="domain">
    <n-scrollbar style="max-height: 100%">
      <div
        v-show="store.state.navId == 1"
        :class="[
          'session-item',
          item.Id == store.state.sessionSelectId ? 'session-active' : '',
        ]"
        v-for="item in store.state.sessionList"
        :key="item.Id"
        @click="selectSession(item)"
      >
        <div class="session-img">
          <!-- <img :src="item.Avatar" /> -->
          <n-badge :value="getUnReadCount(item.Id)">
            <n-avatar size="medium" :src="item.Avatar"></n-avatar>
          </n-badge>
        </div>
        <div class="session-content">
          <div class="session-name text-ellipsis">{{ item.Name }}</div>
          <div
            class="session-desc text-ellipsis"
            v-html="getLastSession(item.Id)"
          ></div>
        </div>
      </div>
      <div
        v-show="store.state.navId == 2"
        :class="[
          'session-item',
          item.Id == store.state.allSessionSelectId ? 'session-active' : '',
        ]"
        v-for="item in store.state.allSessionList"
        :key="item.Id"
        @click="selectSession(item)"
      >
        <div class="session-img">
          <!-- <img :src="item.Avatar" /> -->
          <n-avatar size="medium" :src="item.Avatar"></n-avatar>
        </div>
        <div class="session-content">
          <div class="session-name text-ellipsis">{{ item.Name }}</div>
        </div>
      </div>
    </n-scrollbar>
  </div>
</template>

<style scoped lang="less">
.domain {
  height: 100%;
  width: 20%;
  background: @primary-bgcolor;
  box-shadow: inset 19px 19px 38px @boxshow-color4,
    inset -19px -19px 38px @boxshow-color5;
  padding: 6px 8px;
  .session-item {
    height: 70px;
    width: 100%;
    display: flex;
    align-items: center;
    padding: 0 20px;
    cursor: pointer;
    &:hover {
      border-radius: 50px;
      background: @boxshow-color6;
      box-shadow: inset 12px 12px 24px @boxshow-color6,
        inset -12px -12px 24px @boxshow-color6;
    }
    .session-img {
      width: 30%;
      img {
        height: 40px;
        width: 40px;
        border-radius: 50%;
      }
    }
    .session-content {
      width: 60%;
      margin-left: 10%;
      text-align: left;
      .session-name {
        color: @primary-txcolor;
        font-size: 16px;
      }
      .session-desc {
        font-size: 12px;
        margin-top: 6px;
        color: @input-border-txcolor;
        display: flex;

        /deep/ * {
          padding: 0;
          margin: 0;
        }
        /deep/ img {
          height: 20px !important;
          width: 20px !important;
        }
      }
    }
  }
  .session-active {
    border-radius: 50px;
    background: @boxshow-color4;
    box-shadow: inset 12px 12px 24px @boxshow-color8,
      inset -12px -12px 24px @boxshow-color7;
  }
}
</style>
